<script setup>
// 引入api
import { queryUserPage } from '@/api/user';
import { onMounted,ref } from 'vue';
import ModifyVue from './modify.vue'

// 表单参数
const queryForm = ref({
  page:1,
  pageSize:5,
  total:0,
  pages:1,
  body:{
    name:'',
    gender:''
  }
})

// 数据列表
const userList = ref([])

// 定义方法，实现分页查询
const queryUsers=async()=>{
  console.log('-==============')
  // 调用API查询用户数据
  let result =await queryUserPage(queryForm.value)
  // 列表
  userList.value=result.data
  // 分页数据
  queryForm.value.pages=result.pages
  queryForm.value.total=result.total
}

// 分页调用
const handleSizeChange=(val)=>{
  // 每页条数发生变化
  queryForm.value.pageSize=val
  queryForm.value.page=1
  // 查询分页数据
  queryUsers()
}  
const handleCurrentChange=(val)=>{
    // 当前页发生变化
  queryForm.value.page=val
  queryUsers()
}

//编辑
//1、定位子组件  ref
const chilRef = ref('chilRef')

//2、通过子组件指定要调用的子组件方法或变量
//3、赋值
const handleEdit=(row)=>{
  //操作子组件[实现修改操作]
  //chilRef.value.dialogVisible=true
  //将行数据传递给子组件的userForm对象(Props传递数据)
  chilRef.value.userForm=JSON.parse(JSON.stringify(row))
  chilRef.value.show(true)
}

// 初始化调用
onMounted(()=>{
  queryUsers()
})

</script>
<template>
  <!-- 搜索表单 -->
  <el-form :inline="true" :model="queryForm" class="demo-form-inline">
    <el-form-item label="用户名字">
      <el-input v-model="queryForm.body.name" placeholder="请输入用户名字" clearable />
    </el-form-item>
    <el-form-item label="性别">
      <el-select
        v-model="queryForm.body.gender"
        placeholder="请选择性别"
        clearable
      >
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="queryUsers">查询</el-button>
    </el-form-item>
  </el-form>

  <!-- 列表展示 -->
   <el-table :data="userList" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="gender" label="gender">
        <template #default="scope">
          {{ scope.row.gender==1? '男':'女' }}
        </template>
    </el-table-column>
    <el-table-column prop="createTime" label="CreateTime" width="180" />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">
          Edit
        </el-button>
        <el-button size="small" type="danger">
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页组件 -->
   <el-pagination
      v-model:current-page="queryForm.page"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryForm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 修改组件 -->
     <ModifyVue ref="chilRef" @search="queryUsers" />
</template>